<template>
  <nav
      class="navbar"
      :style="navStyles"
      :class="{ 'navbar--fixed': fixed }"
  >
    <div class="navbar__container">
      <!-- 左侧插槽 -->
      <div class="navbar__left">
        <slot name="left"></slot>
      </div>

      <!-- 导航项 -->
      <div
          class="navbar__items"
          :class="alignmentClass"
          :style="{ height: computedHeight }"
      >
        <Transition name="slide">
          <ul
              v-show="shouldShowMenu"
              class="navbar__list"
          >
            <li
                v-for="(item, index) in items"
                :key="index"
                class="navbar__item"
                :class="{ 'navbar__item--active': index === activeIndex }"
            >
              <a
                  :href="item.href"
                  class="navbar__link"
                  @click="handleItemClick(index, $event)"
                  :tabindex="isMobile ? (collapsed ? -1 : 0) : 0"
              >
                <span class="navbar__icon">
                  <i v-if="item.icon && !item.icon.includes('/')" :class="item.icon"></i>
                  <img v-else-if="item.icon" :src="item.icon" alt="icon">
                </span>
                <span class="navbar__label">{{ item.label }}</span>
              </a>
            </li>
          </ul>
        </Transition>
      </div>

      <!-- 右侧插槽和菜单按钮 -->
      <div class="navbar__right">
        <slot name="right"></slot>
        <button
            v-if="isMobile"
            class="navbar__toggle"
            @click="toggleCollapse"
            :aria-label="collapsed ? '展开菜单' : '折叠菜单'"
        >
          <svg class="navbar__hamburger" viewBox="0 0 24 24">
            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
          </svg>
        </button>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { ref, computed, watchEffect, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  backgroundColor: { type: String, default: '#ffffff' },
  textColor: { type: String, default: '#333333' },
  height: { type: [String, Number], default: '60px' },
  fixed: { type: Boolean, default: false },
  items: { type: Array, default: () => [] },
  activeIndex: { type: Number, default: -1 },
  breakpoint: { type: [String, Number], default: 768 },
  collapsed: { type: Boolean, default: true },
  alignment: { type: String, default: 'left', validator: v => ['left', 'center', 'right'].includes(v) }
})

const emit = defineEmits(['item-click', 'collapse-toggle'])

// 响应式状态
const isMobile = ref(false)
const isCollapsed = ref(props.collapsed)
const windowWidth = ref(window.innerWidth)

// 计算属性
const computedHeight = computed(() =>
    typeof props.height === 'number' ? `${props.height}px` : props.height
)

const alignmentClass = computed(() => `navbar__items--${props.alignment}`)

const navStyles = computed(() => ({
  backgroundColor: props.backgroundColor,
  color: props.textColor,
  height: computedHeight.value
}))

const shouldShowMenu = computed(() =>
    !isMobile.value || (isMobile.value && !isCollapsed.value)
)

// 方法
const handleItemClick = (index, event) => {
  event.preventDefault()
  emit('item-click', { index, href: props.items[index].href })
}

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
  emit('collapse-toggle', isCollapsed.value)
}

const checkBreakpoint = () => {
  const breakpointValue = typeof props.breakpoint === 'string'
      ? parseInt(props.breakpoint, 10)
      : props.breakpoint
  isMobile.value = windowWidth.value < breakpointValue
}

// 生命周期
const handleResize = () => {
  windowWidth.value = window.innerWidth
  checkBreakpoint()
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
  checkBreakpoint()
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

watchEffect(() => {
  isCollapsed.value = props.collapsed
})
</script>

<style scoped>
.navbar {
  position: relative;
  width: 100%;
  transition: all 0.3s ease;
}

.navbar--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.navbar__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.navbar__items {
  display: flex;
  flex-grow: 1;
}

.navbar__items--left { justify-content: flex-start; }
.navbar__items--center { justify-content: center; }
.navbar__items--right { justify-content: flex-end; }

.navbar__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar__item {
  position: relative;
  margin: 0 15px;
}

.navbar__link {
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  padding: 10px;
  transition: color 0.3s ease;
}

.navbar__link:hover,
.navbar__item--active .navbar__link {
  opacity: 0.8;
}

.navbar__icon {
  margin-right: 8px;
}

.navbar__toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}

.navbar__hamburger {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

@media (max-width: 768px) {
  .navbar__items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: inherit;
    flex-direction: column;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .navbar__list {
    flex-direction: column;
    padding: 10px 20px;
  }

  .navbar__item {
    margin: 5px 0;
  }

  .slide-enter-active,
  .slide-leave-active {
    transition: max-height 0.3s ease;
  }

  .slide-enter-from,
  .slide-leave-to {
    max-height: 0;
  }

  .slide-enter-to,
  .slide-leave-from {
    max-height: 500px;
  }
}
</style>